<template>
  <view class="goods-detail">
      <!-- 轮播图 -->
      <u-swiper :list="goodsDetail.pics" name="pics_big" height="497" bg-color="#fff" img-mode="aspectFit" @click="handlePreviewImage"></u-swiper>
      <!-- 标题 -->
      <view class="goods-title">
          <view class="title-header">
              <view class="title-left" >
                 ￥{{goodsDetail.goods_price}}
                  </view>
              <view class="title-right">
                  <u-icon name="zhuanfa" size="46" color="#707070"></u-icon>
                  <u-icon class="star" name="star" size="46" color="#707070"></u-icon>
              </view>
          </view>
          <view class="title-content">{{goodsDetail.goods_name}}
          </view>
      </view>
      <!-- 图文详情富文本框渲染 -->
      <view class="u-content">
          <view class="title1">图文详情</view>
		<u-parse :html="goodsDetail.goods_introduce" :selectable="true"></u-parse>
	</view>
      <!-- 提交订单栏 -->
      <view class="navigation">
		<view class="left">
			<view class="item">
				<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">联系客服</view>
			</view>
			<navigator class="item car"
            url="/pages/cart/cart"
            open-type="switchTab">
				<u-badge class="car-num" :count="count" type="error" :offset="[-3, -6]"></u-badge>
				<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">购物车</view>
			</navigator>
		</view>
		<view class="right">
			<view class="cart btn u-line-1" @click="handleCartAdd">加入购物车</view>
			<view class="buy btn u-line-1">立即购买</view>
		</view>
	</view>
  </view>
</template>

<script>
import {mapState,mapMutations} from "vuex"
export default {
    data(){
        return{
            goodsDetail:null,//商品详情数组
            // content:"",//图文详情
            // title:"",//标题
            // price:0,//价格
        }
    },
    computed: {
            ...mapState({
                // 总的数量
                count:(state)=>state.cart.cartList.reduce((count,item)=>count+=item.nums,0)
            })
        },
    onLoad({goods_id}){
        goods_id=goods_id||47868
        // 获取商品详情
        this.getGoodsDetail(goods_id)
    },
    // 下拉刷新
    onPullDownRefresh(){
        // 重新渲染数据
        this.getGoodsDetail()
        // 关闭下拉刷新
        uni.stopPullDownRefresh()
    },
    methods:{
        // 获取商品详情
        async getGoodsDetail(goods_id){
            this.goodsDetail=await this.$u.http.get("/goods/detail",{goods_id})
            this.content=this.goodsDetail.goods_introduce
            this.title=this.goodsDetail.goods_name
            this.price=this.goodsDetail.goods_price
        },
        // 点击轮播图预览图片功能
        handlePreviewImage(index){
            // console.log(111);
            // 获取要放大预览的图片数组["路径1","路径2"]
            const urls=this.goodsDetail.pics.map((item)=>item.pics_big)
            // 点击当前的图片的路径
            const current=urls[index]
            // 调用api放大图片预览
            uni.previewImage({
                urls,current
            })
        },
        // 获取vuex mutations
        ...mapMutations(["cart/cartAdd"]),
        // 点击加入购物车
        handleCartAdd(){
            // console.log(this.cart/cartAdd);
            // console.log(this['cart/cartAdd']);
            this["cart/cartAdd"]({value:this.goodsDetail})
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-detail{
    background-color: #f9f9f9;
    // 标题
.goods-title {
    width: 100%;
    height: 220rpx;
    padding: 0 34rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    // margin-bottom: 20rpx;
  .title-header {
      display: flex;
      justify-content: space-between;
      font-size: 36rpx;
    .title-left {
        color: #eb4450;
    }

    .title-right {
      .star {
          margin-left: 40rpx;
      }
    }
  }

  .title-content {
    //   color: #545454;
      font-size: 30rpx;
  }
}
// 图文详情富文本框
.u-content {
		margin-top: 20rpx;
        margin-bottom: 94rpx;
        padding: 0 10rpx;
        .title1{
            width: 100%;
            height: 60rpx;
            text-align: center;
            font-size: 28rpx;
        }
	}
//提交订单栏
.navigation {
	display: flex;
    width: 100%;
    height: 94rpx;
    position: fixed;
    bottom: 0;
    justify-content: space-evenly;
	border: solid 2rpx #f2f2f2;
	background-color: #fff;
	padding: 16rpx 0;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
            text-align: center;
            color: #6b6b6b;
			margin: 0 30rpx;
            .u-line-1{
                margin-top: 3rpx;
            }
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
            width: 196rpx;
            height: 60rpx;
			line-height: 60rpx;
            text-align: center;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #fcaa23;
			margin-right: 30rpx;
		}
		.buy {
			background-color: #ea4350;
		}
	}
}
}

</style>